<template>
	<view class="wrap">
		<view class="title_wrap">
			<view class="title_desc">
				聚会完成奖励才会发放，取消或未能成功完成，奖励会全额退还
			</view>
		</view>
		<view class="reward_wrap flx flx_justify_between">
			<view class="reward_item_wrap" v-for="(item, index) in rewardList" :key="index" @click="seleReward(index)">
				<view :class="`reward_item flx ` + `${item.sele ? 'reward_sele' : ''}`" v-if="item.count!=0">
					<view class="reward_icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/icon_bbt.png" mode=""></image>
					</view>
					X
					{{ item.count }} / 人
				</view>
				<view :class="`reward_item flx ` + `${item.sele ? 'reward_sele' : ''}`" v-else>
					<view class="reward_icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/icon_bbt.png" mode=""></image>
					</view>
					不设置悬赏
				</view>
			</view>
			<view class="reward_item_wrap" @click="setCustomReward">
				<view :class="`reward_item flx ` + `${isCustom ? 'reward_sele' : ''}`">
					<view class="reward_icon">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/icon_bbt.png" mode=""></image>
					</view>
					<text v-show="customReward">X {{ customReward }} / 人</text>
					<text v-show="!customReward">自定义奖励</text>
				</view>
			</view>
		</view>
		<view class="reward_btn_wrap">
			<view class="reward_btn btn" @click="finishSele">
				确定
			</view>
		</view>


		<uni-popup ref="dialog" type="center">
			<view class="dialog">
				<view class="dialog-title"> 请输入奖励数量 </view>
				<view class="dialog-content">
					<input type="number" v-model="customReward" placeholder="请输入奖励">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/img/icon_bbt.png" mode=""></image>
				</view>
				<view class="dialog-footer">
					<view class="btn-cancel" @click="cancalSetReward"> 取消 </view>
					<view :disabled="customReward" class="btn-comfirm" @click="confirmSetReward()"> 确定 </view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rewardList: [{
						count: 1000,
						sele: true
					},
					{
						count: 2000
					},
					{
						count: 3000
					},
					{
						count: 4000
					},
					{
						count: 0
					}
				],
				currentIndex: 0,
				customReward: '',
				isCustom: false
			}
		},
		onReady(){
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#ffffff',
			})
		},
		methods: {
			seleReward(index) {
				this._clearAllSele()
				this.isCustom = false
				if (this.rewardList[index]) {
					this.currentIndex = index
					this.rewardList[index].sele = true
				}
				this.rewardList = [...this.rewardList]
			},
			setCustomReward() {
				this._clearAllSele()
				this.isCustom = true
				this.isCustom = true
				this.$refs['dialog'].open()

			},
			confirmSetReward() {
				if (!this.customReward) {
					this.$pv.msg('请输入奖励数量')
					this.customReward = ''
					return
				}
				if (isNaN(Number(this.customReward))) {
					this.$pv.msg('请输入数字')
					this.customReward = ''
					return
				}
				if (Number(this.customReward).toString().indexOf('.') > 0) {
					this.$pv.msg('请输入整数')
					this.customReward = ''
					return
				}
				// if (this.customReward < 100) {
				// 	this.$pv.msg('数量最少100')
				// 	this.customReward = ''
				// 	return
				// }

				this.$refs['dialog'].close()
			},

			cancalSetReward() {
				this.customReward = ''
				this.$refs['dialog'].close()
			},

			finishSele() {
				let count = 0
				if (this.isCustom) {
					count = this.customReward
				} else {
					count = this.rewardList[this.currentIndex].count
				}
				uni.$emit('reward', count);
				this.nav_back();
			},

			_clearAllSele() {
				this.rewardList = this.rewardList.map((v) => {
					v.sele = false
					return v
				})
				this.rewardList = [...this.rewardList]
			}
		}
	}
</script>

<style lang="scss">
	.wrap {

		padding: 48rpx;

		.title {
			font-size: 40rpx;
			margin-bottom: 12rpx;
		}

		.title_desc {
			font-size: 26rpx;
			color: rgb(154, 152, 152);
		}

		.reward_icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}

		.reward_wrap {
			margin-top: 58rpx;
			flex-wrap: wrap;
		}

		.reward_item_wrap {
			width: 45%;
			margin: 18rpx 0;
		}

		.reward_item {
			padding: 20rpx;
			border: 1rpx solid #333333;
			border-radius: 10rpx;
		}

		.reward_btn {
			margin-top: 146rpx;
		}

		.reward_sele {
			background: #FEF0BC;
			color: black;

			text {
				color: #000;
			}
		}


		image {
			width: 100%;
			height: 100%;
		}


	}



	.dialog {
		width: 650rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding-bottom: 40rpx;

		.dialog-title {
			text-align: center;
			color: #000;
			padding-top: 40rpx;
		}

		.dialog-desc {
			color: #999;
			font-size: 24rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.dialog-content {
			font-size: 34rpx;
			display: flex;
			align-items: center;
			padding: 32rpx 44rpx;

			input {
				flex: 1;
				height: 72rpx;
				border-bottom: 1rpx solid #333333;
				color: #000;
			}

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.dialog-footer {
			padding: 30rpx 50rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn-cancel {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				color: #333333;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1rpx solid #333333
			}

			.btn-comfirm {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				background: #333333;
				color: #ffffff;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>